<template>
    <div class="node z-10  flex-shrink-0"
         :style="{height: node.height+'px',width:node.width+'px',borderWidth:node.border+'px',padding: node.padding+'px'}">
        <router-link class="card m-0 overflow-hidden" :class="{'primary':course.course_type===0,'secondary':course.course_type===1,'practise':course.course_type===2}"
                     :to="{name:'course',query:{career:career,skill:skill},params:{course:course.id}}"
                     :style="{height: node.height-node.padding*2+'px'}">
            <div class="relative">
                <span class="absolute top-0 left-0 text-sm">{{course.course_type_text}}</span>
                <span class="absolute top-0 right-0 text-sm" v-if="course.is_completed">已完成</span>
                <span class="absolute top-0 right-0 text-sm" v-else-if="course.learn_count">学习时长{{timeText(course.learn_count)}}</span>

                <div class="title pt-4">
                    {{course.title}}
                </div>
                <p class="text-grey" style="overflow: hidden;
    text-overflow: ellipsis;
    height: 25px;
    width: 100%;">
                    {{course.description}}
                </p>
            </div>
        </router-link>
    </div>
</template>

<script>

    import TimeText from '../mixins/TimeText'

    export default {
        mixins: [TimeText],
        props: {
            course: {type: Object, required: true}, node: {
                type: Object, default() {
                    return {height: 120, width: 250, border: 0, padding: 10};
                }
            }, career: [String, Number], skill: [String, Number]
        }
    }
</script>

<style scoped>

</style>